<template>
  <div class="accidentTypes-root">
    <formTitleVue
      title="事故原因"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPieRing domId="accident-accidentReason-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import myPieRing from '@/components/Echarts/myPieRing.vue';
  import { time_select_optios } from '@/utils/global.js';
  import { accidentReason } from '@/api/risk/accidentCases'
  export default {
    name: "accidentTypes",
    components: {
      formTitleVue,myPieRing,
    },
    data() {
      return {
        selectOptions: [
          {
            selectValue: "1",
            options: this.typeOptions,
            changeFn: this.selectChange1,
          },
          {
            selectValue: "11",
            options: this.smallTypeOptions,
            changeFn: this.selectChange2,
          },
          {
            selectValue: "近一月",
            options:[
              { label: "近一月", value: "近一月" },
              { label: "近半年", value: "近半年" },
              { label: "近一年", value: "近一年" },
            ],
            changeFn: this.selectChange,
          }
        ],
        chartsData: {
          xData: ["市政设施", "房屋建筑", "交通设施", "人员密集区域"],
          yData: [],
        },
        echartsOption:{

        },
        typeOptions:[],
        smallTypeOptions:[],
        smallTypeTemp:[],
        searChForm: {
          startTime: '',
          endTime: '',
          accidentCaseType:"",
        },
      };
    },
    watch:{
      'typeOptions': {
        handler(newVal, oldVal) {
          this.selectOptions[0].options = newVal;
          if(newVal.length>0){
            this.selectOptions[0].selectValue = newVal[0].value
            let item = this.smallTypeTemp.find(t=>t.type==newVal[0].value)
            this.smallTypeOptions = item.data
          }
        },
        deep: true,
        immediate: true
      },
      'smallTypeOptions':{
        handler(newVal, oldVal) {
          this.selectOptions[1].options = newVal;
          if(newVal.length>0){
            this.selectOptions[1].selectValue = newVal[0].value
            this.selectChange2(newVal[0].value)
          }
        },
        deep: true,
        immediate: true
      },
    },
    methods: {
      selectChange1(item){
        let itemT = this.smallTypeTemp.find(t=>t.type==item)
        this.smallTypeOptions = itemT.data
      },
      selectChange2(item){
        this.searChForm.accidentCaseType = item
        this.getData()
      },
      selectChange(item) {
        // console.log(item);
        this.searChForm.startTime = time_select_optios[item].startTime
        this.searChForm.endTime = time_select_optios[item].endTime
        this.getData()
      },
      getData(){
        this.searChForm.areaCode = this.$store.state.account.user.deptIds;
        this.searChForm.placeType = this.$commonJs.getPlaceType(this.searChForm.areaCode);
        // console.log(this.searChForm);
        accidentReason(this.searChForm).then(r=>{
          if(r.code==200){
            let res = r.data.report
            this.chartsData.yData = [
              {
                name:"事故原因",
                radius : ['40%', '60%'],
                center: ["30%", "50%"],
                data: res
              }
            ]
            let total = 0
            // 给每个饼块统一添加引导文字
            this.chartsData.yData.forEach(item => {
              item.data.forEach(item => {
                // 隐藏引导线和文字
                item.label = {
                  normal:{
                    show: true,
                    formatter: "{b}\n{d}%",
                  },
                }
                item.labelLine = {
                  show: true,
                }
                total += item.value
              })
            })
            this.echartsOption = {
              title:{
                text: `事故总数`,
                left: "29%",
                top: "42%",
                textVerticalAlign:'top',
                textAlign:'center',
                textStyle: {
                  color: "#5A5A5A",
                  fontSize: 12,
                },
                subtext: total,
                subtextStyle: {
                  // verticalAlign:'top',
                  color: "#5A5A5A",
                  fontSize: 16,
                },
              },
              legend:{
                orient: 'vertical',
                top: 'middle',
                right: '10%',
                // formatter: 'Legend {name}',
                // 使用回调函数
                formatter: function (name) {
                  for(let item of res){
                    if(item.name == name){
                      let p
                      if(total == 0 || !item.value){
                        p = 0
                      }else{
                        p = (item.value/total*100).toFixed(2)
                      }
                      return `${name} ${item.value} 占比${p}%`
                    }
                  }
                }
              }
            }
          }
        })
      },
    },
    mounted() {
      this.searChForm.accidentCaseType = "11",
      this.searChForm.startTime = time_select_optios["近一月"].startTime
      this.searChForm.endTime = time_select_optios["近一月"].endTime
      this.getData()
    },
    created(){
      let temp = []
      this.typeOptions = []
      this.$commonJs.filterDataDict("riskAccidentCasesType", temp)
      this.typeOptions = temp.map(t=>{
        let value = JSON.parse(t.name)
        return {label: t.label, value: value.value}
      })
      // 存放临时值
      this.smallTypeTemp = []
      temp.forEach(t=>{
        let value = JSON.parse(t.name)
        this.smallTypeTemp.push({type: value.value, data: value.children})
      })
      console.log("typeOptions===>",this.typeOptions)
    }
  };
</script>

<style lang="scss" scoped>
  .accidentTypes-root {

  }
</style>
